<template lang="pug">
  div.box
    h2 学生管理
    div.c
      div.info
        div(v-for="(item, index) in childrenGenderCountList" :key="index")
          img(:src="require(`@/assets/${item.gender==='男'?'nan':'nv'}.png`)")
          p {{item.gender}}人数（名）
          span {{item.childrenCount}}
      .echartBox#studentEchartsBox(style="height: 272px;width:272px")
</template>
<script>
import echartMixin from '@/mixins/echarts'
import { dashboardByArea } from '@/api/dashboard'
const color = ['#FBB624', '#58A5FF']
export default {
  name: 'StaticsEcharts',
  mixins: [echartMixin],
  data () {
    return {
      echartsId: 'studentEchartsBox',
      data: {
        childrenCount: 0,
        maleCount: 0,
        femaleCount: 0,
        areaCount: 0,
        classCount: 0,
        teacherCount: 0,
        staffCount: 0
      },
      childrenGenderCountList: []
    }
  },
  mounted () {
    this.getData()
  },
  methods: {
    getData () {
      dashboardByArea().then(res => {
        this.childrenGenderCountList = res.childrenGenderCountList
        // this.data = res.information
        // const chartData = {
        //   man: { value: res.information.maleCount, name: '男生' },
        //   faleMan: { value: res.information.femaleCount, name: '女生' }
        // }
        // this.getEcharts(chartData)

        const chartData = []
        let childrenCount = 0
        this.childrenGenderCountList.forEach((x, index) => {
          chartData.push({
            value: x.childrenCount,
            name: x.gender,
            itemStyle: {
              color: color[index]
            }
          })
          childrenCount += x.childrenCount
        })
        console.log(chartData)
        this.getEcharts(chartData, childrenCount)
      })
    },
    getEcharts (values, childrenCount) {
      console.log(values)
      const options = {
        backgroundColor: '#E7EDFB',
        title: {
          text: childrenCount,
          subtext: '幼儿总数',
          top: 'center',
          left: 'center',
          textStyle: {
            fontSize: 24,
            lineHeight: 10
          }
        },
        grid: {
          top: 0,
          bottom: 0,
          left: 0
        },
        tooltip: {
          trigger: 'item'
        },
        series: [
          {
            name: '学生情况',
            type: 'pie',
            radius: ['70%', '90%'],
            avoidLabelOverlap: false,
            labelLine: {
              length: 5
            },
            label: {
              show: false
            },
            data: values
          }
        ]
      }
      this.$_chartMixin_init(options)
    }
  }
}
</script>
<style lang="scss" scoped>
.c{
  display: flex;
  align-items: center;
  justify-content: space-between;
  ::v-deep{
    div{
      border-radius: 272px !important;
    }
  }
}
.box{
  border: 1px solid #EBEBEE;
  border-radius: 8px !important;
  padding: 24px;
  .info{
    div{
      display: flex;
      flex-direction: column;
      align-items: center;
      img{
        margin-bottom: 16px;
      }
      p{
        width: 112px;
        height: 23px;
        font-family: Source Han Sans SC, Source Han Sans SC;
        font-weight: 400;
        font-size: 16px;
        color: #77778C;
        font-style: normal;
        text-transform: none;
        text-align: center;
        margin-bottom: 8px;
      }
      span{
        font-family: Source Han Sans SC, Source Han Sans SC;
        font-weight: 800;
        font-size: 24px;
        color: #000000;
        font-style: normal;
        text-transform: none;
      }
    }
    div:nth-child(1){
      margin-bottom: 52px;
    }
  }
}
h2{
    font-family: Source Han Sans SC, Source Han Sans SC;
    font-weight: bold;
    font-size: 18px;
    color: #000000;
    text-align: left;
    font-style: normal;
    text-transform: none;
    margin: 0;
    padding-bottom: 24px;
}
</style>
